<template>
  <div>
    <div>
      <p>{{titleName}}</p>
    </div>
    <div class="labelContent">
      <p class="labeltext">{{labelName}}</p>
    </div>

    <div class="com-btn">
      <span class="btn" @click="handleItemPrint">
        打印slot
      </span>
    </div>
  </div>
</template>

<script>
const vm = {
    props: {
      labelName: {
        type: String,
        default: ''
      },
    },

    data() {
      return {
        titleName: 'pannel name'
      }
    },
    mounted () {
      this.handleCominit();
    },

    methods: {
      handleCominit() {
        console.log('init pannle for log this:', this)
      },

      handleItemPrint() {
        console.log('vm', vm)
        console.log('slots', this.$slots)
        console.log('props', this.$props)
        console.log('options props', this.$options.props)
      }
    }
  }

export default vm
</script>

<style lang="stylus" scoped>
.com-btn
  display: flex
  margin 20px
.btn
  padding 8px 15px
  background-color #4cd964
  color #fff
  border-radius: 4px
  cursor pointer


</style>